import React, { useState, useEffect } from 'react'
import { Card, Table, Button, Drawer, Modal, Tag, Checkbox, message, Form } from 'antd'
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import request from '@/utils/request'
import ManagView from './manage'
import SaveView from './save'
import { ExclamationCircleOutlined } from '@ant-design/icons'

const { confirm } = Modal
export default () => {
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [drawerVisable, setDrawerVisable] = useState(false)
    const [visable, setVisable] = useState(false)
    const [tableData, setTableData] = useState({ list: [], total: 0 })
    const [form] = Form.useForm();
    const [id, setId] = useState(0)
    const [attrList, setAttrList] = useState([])

    const columns: any = [
        {
            title: '类型名称',
            dataIndex: 'title',
            render: (text: any) => text,
        },
        {
            title: '启用',
            dataIndex: 'enable',
            render: (text: any) => <Checkbox checked={text} />,
            align: "center",
            width: "120px",
        },
        {
            title: '排序',
            width: "120px",
            dataIndex: 'sort',
            align: "center",
            render: (text: any) => <Tag color="cyan">{text}</Tag>
        },
        {
            title: '操作',
            width: "220px",
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" onClick={() => {
                        setId(record.id)
                        setVisable(true)

                        request(`/goods/genre/${record.id}`).then((result) => {
                            const data = result.data;
                            console.log(data);
                            form.setFieldsValue(data)
                        })

                    }}>修改</Button>
                    <Button size="small" type="primary" ghost onClick={() => {
                        setId(record.id)
                        setDrawerVisable(true)
                        getAttrList(record.id)
                    }} style={{ margin: "0 8px" }}>管理</Button>

                    <Button size="small" danger onClick={() => destroy([record.id])}>删除</Button>
                </>
            ),
        },
    ];

    const getAttrList = (genreId: any) => {
        request(`/goods/genre-attr-list?genreId=${genreId}`).then((result) => {
            setAttrList(result.data)
        })
    }

    const rowSelection = {
        selectedRowKeys: selectedKeys,
        onChange: (selectedRowKeys: any) => {
            setSelectedKeys(selectedRowKeys)
        },
    };

    const getList = (params = {}) => {
        request(`/goods/genre-list`, { params }).then((result) => {
            const { list, total } = result.data
            setTableData({ list, total })
        })
    }

    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/goods/genre-destroy`, {
                    method: "Delete",
                    params: { ids },
                }).then((result) => {
                    message.success("删除成功")
                    getList()
                })
            }
        });
    }

    const ToolBtn = () => {
        return (
            <div>
                <Button type="primary" danger style={{ marginRight: "8px" }} onClick={() => {
                    const tableIds = tableData.list.map((item: any) => item.id)
                    let selectIds: [] = [];
                    selectedKeys.forEach((item) => {
                        if (tableIds.includes(item)) {
                            selectIds.push(item)
                        }
                    })

                    if (selectIds.length < 1) {
                        message.warn("请选择你要操作的选项")
                        return
                    }
                    destroy(selectIds)
                }}>批量删除</Button>

                <Button type="primary" ghost onClick={() => {
                    form.resetFields()
                    setId(0)
                    setVisable(true)
                }}>添加商品类型</Button>
            </div>
        );
    }

    useEffect(() => {
        getList()
    }, [])

    return (
        <PageHeaderWrapper title={false}>
            <Card title={<ToolBtn />}>
                <Table rowKey="id" columns={columns} dataSource={tableData.list} rowSelection={rowSelection} />
                <Drawer
                    title="商品类型"
                    placement="right"
                    onClose={() => {
                        setDrawerVisable(false)
                    }}
                    visible={drawerVisable}
                    width="40%"
                >
                    <ManagView id={id} attrList={attrList} setAttrList={setAttrList} getAttrList={getAttrList} />
                </Drawer>

                <Modal
                    title={id > 0 ? "修改类型" : "添加类型"}
                    visible={visable}
                    width="40%"
                    getContainer={false}
                    onOk={() => {
                        form.submit()
                    }}
                    onCancel={() => {
                        setVisable(false)
                    }}
                >
                    <SaveView
                        form={form}
                        id={id}
                        close={() => { setVisable(false) }}
                        getList={getList}
                    />
                </Modal>
            </Card>
        </PageHeaderWrapper>
    );
}